<template>
    <div class="findBox">
        <div class="left">
            <div class="quick">
                <h3>
                    <van-tag mark type="danger">急</van-tag>
                    紧急寻人
                    
                </h3>
                <ul class="qul">
                    <li v-for="item in findData.slice(0,9)" :key="item._id">
                        <div class="imgBox">
                            <img :src="item.img" alt="">
                        </div>
                        <p>
                            {{item.txt}}
                        </p>
                    </li>
                </ul>

                <div class="btnGroup">
                    <div>提供线索</div>
                    <div>寻人指引</div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="new">
                <h3>
                    <van-tag round type="success">new</van-tag>
                    最新寻人
                </h3>
                <ul class="nul">
                    <li v-for="item in findData.slice(0,4)" :key="item._id" @click="toDetail(item._id)" :id="item._id"  >
                        <div class="imgBox">
                            <img :src="item.img" alt="图片"  >
                        </div>
                        <div class="txtBox" >
                            <p class="top">
                                <span class="name">{{item.name}}</span>
                                <span class="time">{{item.time}}</span>
                            </p>
                            <p class="ms">
                                {{item.content}}
                            </p>
                            <p class="buttom">
                                <span>联系人：{{item.postman}}</span>
                                <span>联系电话：{{item.phone}}</span>
                            </p>
                        </div>
                    </li>
                </ul>
                <p class="allFind">
                    查看所有寻人启事
                </p>
            </div>
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import { Tag } from 'vant';

Vue.use(Tag);
export default {
    props:['findData'],
    methods:{
        toDetail(id){
            // console.log(id);
            this.$router.push(`/findDetail/id=${id}`)
        }
    }
}
</script>
<style lang="scss" scoped>
    .findBox{
        display: flex;
        justify-content: space-between;
        margin-top: 80px;
        padding-bottom: 20px;
        .left{
            width: 420px;
            .quick{
                padding-top: 10px;
                h3{
                    font-size: 24px;
                    color: #af1e1d;
                }
                .qul{
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    li{
                        width: 30%;
                        height: 220px;
                        border: 1px solid #ccc;
                        border-top: none;
                        margin-top: 20px;
                        cursor: pointer;
                        .imgBox{
                            height: 190px;
                            overflow: hidden;
                            display: flex;
                            img{
                                width: 100%;
                                transition: all .5s;
                            }
                            img:hover{
                                transform: scale(1.05)
                            }
                        }
                        p{
                            text-align: center;
                            padding: 5px 2px;
                        }
                    }
                }
                .btnGroup{
                    display: flex;
                    justify-content: space-between;
                    margin-top: 40px;
                    div{
                        width: 48% !important;
                        text-align: center;
                        color: #fff;
                        line-height: 52px;
                        font-size: 17px;
                        font-weight: bold;
                        background:  #f1861c;
                        border-radius: 10px;
                        cursor: pointer;
                    }
                }
            }
        }
        .right{
            border: 2px solid #ccc;
            border-radius: 10px;
            width: 720px;
            padding: 0 30px;
            box-sizing: border-box;
            .new{
                padding-top: 10px;
                h3{
                    font-size: 24px;
                    color: #4fc08d;
                    padding-left: 20px;
                }
                .nul{
                    margin-top: 10px;
                    li{
                        border-bottom: 2px solid #ccc;
                        display: flex;
                        padding: 10px 20px;
                        margin-bottom: 20px;
                        .imgBox{
                            width: 100px;
                            height: 140px;
                            overflow: hidden;
                            cursor: pointer;
                            img{
                                width: 100%;
                                transition: all .5s;
                            }
                            img:hover{
                                transform: scale(1.05)
                            }
                        }
                       .txtBox{
                           margin-left: 40px;
                           width: 475px;
                           .top{
                               display: flex;
                               justify-content: space-between;
                                .name{
                                   color: #5d5e5f;
                                   font-weight: 600;
                               }
                                .name:hover{
                                   color: blue;
                               }
                                .time{
                                    color: #5d5e5f;
                                    font-weight: 600;
                                }
                           }
                           .ms{
                               height: 80px;
                               margin-top: 20px;
                               cursor: pointer;
                               font-size: 14px;
                               color: #333;
                               overflow: hidden;
                               text-overflow: ellipsis;
                               white-space: normal;
                           }
                           .ms:hover{
                               color: blue;
                           }
                           .buttom{
                               float: right;
                               color: #5d5e5f;
                               font-size: 13px;
                               text-align: right;
                               margin-top: 10px;
                               span{
                                   margin-left: 40px;
                               }
                           }
                       }
                    }
                }
                .allFind{
                    text-align: right;
                    margin-bottom: 10px;
                    cursor: pointer;
                }
            }
        }
    }
</style>